<template>
    <div class="map-wrap">
      <div class="mapCenter">
        <div class="opration-top">
          <p class="refrashDate">
            <!-- <span @click="backMap">全国</span>
            <span @click="backMap" v-if="!firstRender && third == false">-江苏省分行</span>
            <span @click="backMap" v-if="!firstRender && isShowcity == true">-无锡市分行</span>
            <span>档案中心</span> -->
            <span>智能档案库综合监管平台</span>
          </p>
        </div>
        <div class="anniubtn">
          <el-button class="mapBtn" size="mini" @click.native="() => backMap()"
            >返回上一级</el-button
          >
          <el-button
            class="mapBtn"
            size="mini"
            @click.native="() => fullScreen(true)"
            id="seven-day"
            >全屏</el-button
          >
          <el-button
            class="mapBtn"
            size="mini"
            @click.native="() => fullScreen(false)"
            >退出</el-button
          >
        </div>
        <!-- <p class="refrashDate2">
          <span>全国</span>
          <span @click="backMap" v-if="!firstRender && third == false">-江苏省工行</span>
          <span @click="backMap" v-if="!firstRender && isShowcity == true">-无锡市分行</span>
        </p> -->
        <div class="map-box">
          <div ref="chinaMap" id="container"></div>
        </div>
      </div>
    </div>
  </template>
  
  <script>
  import "./mapChart.scss";
  
  import * as echarts from "echarts";
  import { provinces, cityMap, special } from "./common";
  // import chinaMapData from '/map/china.json';
  let provincesName = "china";
  export default {
    name: "mapChart",
    // 组件传参
    props: {
      depotId: {
        type: String,
        default: "",
      },
      depotList: {
        type: Array,
        default: [],
      },
    },
  
    data() {
      return {
        mapStack: [],
      };
    },
  
    // 组件注册
    components: {},
  
    // 数据监听
    watch: {},
  
    // 计算属性
    compute: {},
  
    mounted() {
      this.initMap();
    },
  
    // 方法实现
    methods: {
      // 全屏
      fullScreen(value) {
        this.$emit("fullScreen", value);
      },
      // 获得中国地图数据
      getChinaMapData() {
        $.getJSON(`/map/china.json`, data => {
  
          console.log('哈哈哈哈哈', data)
          return data
        });
      },
      // 在地图中添加图标高亮点
      addHighlightDepot() {
        let seriesDepot = [];
        let depotList = []
          this.depotList.map(item => {
            depotList.push({
              name: item.name, 
              value: [item.longitude, item.latitude],
              depotId: item.id, 
              depotCode: item.code, 
            })
          })
   
          let symbolImg2 = "image://" + require("@/assets/logo.png");
  
          seriesDepot.push({
            type: "scatter", // 使用散点图系列表示标点
            coordinateSystem: "geo", // 使用地理坐标系
            data: depotList,
            // [
            //   // 这里的经纬度数据用于标点
            //   { name: "北京", value: [116.405285, 39.904989],depotId: 10 },
            //   { name: "上海", value: [121.473701, 31.230416],depotId: 9  },
            // ],
            symbol: symbolImg2,
            symbolSize: function(val) {
              // 可以根据数据的 value 调整标点的大小
              return val[2] ? val[2] * 10 : 15;
            },
            
            
            // 可以在这里配置其他散点图系列的选项
          });
  
        return seriesDepot;
      },
      // 地图初始化
      initMap(mapName, mapData) {
        let that = this;
        const myChart = echarts.init(this.$refs.chinaMap);
        // let symbolImg2 = "image://" + require("@/assets/logo.png");
  
        const option = {
          geo: {
            type: "map",
            map: "china",
            label: {
              // label 设置文本标签的显示格式，去掉不影响显示地图
              normal: {
                color: "#000000",
                show: true, //省份名称
              },
            },
            roam: true, // 开启缩放和平移
            itemStyle: {
                normal: {
                  areaColor: "#5ab1ef", //地图块颜色#DCE2F1  浅蓝#2B91B7
                  borderColor: "#EBEBE4", //#EBEBE4灰色
                  borderWidth: 0.5,
                },
                emphasis: {
                  areaColor: "rgba(43, 196, 243, 0.42)", //s鼠标放上去，地图块高亮显示的颜色
                },
              },
          },
          series: [
            ...this.addHighlightDepot(),
            
            {
              name: mapName,
              type: "map",
              map: mapName,
              mapType: "china",
              roam: true, // 开启缩放和平移
              itemStyle: {
                normal: {
                  areaColor: "#5ab1ef", //地图块颜色#DCE2F1  浅蓝#2B91B7
                  borderColor: "#EBEBE4", //#EBEBE4灰色
                  borderWidth: 0.5,
                },
                emphasis: {
                  areaColor: "rgba(43, 196, 243, 0.42)", //s鼠标放上去，地图块高亮显示的颜色
                },
              },
              data: mapData,
              emphasis: {
                itemStyle: {
                  areaColor: "#3a3a3a", // 高亮（鼠标悬停）颜色
                },
                textStyle: {
                  color: "#000",
                },
              },
              // 可选：添加点击事件监听
              // 注意：实际使用中可能需要更复杂的逻辑来确定是否下钻
              geoIndex: 0,
              selectedMode: "single", // 允许选中单个区域
              selected: {},
  
            },
          ],
          // 初始动画的时长，支持回调函数，可以通过每个数据返回不同的 delay 时间实现更戏剧的初始动画效果：
          animationDuration: 1000,
          animationEasing: "cubicOut",
          // 数据更新动画的时长。
          animationDurationUpdate: 1000,
        };
  
        // 下钻
        myChart.on("click", params => {
          provincesName = provinces[params.name] || cityMap[params.name];
  
          console.log("hhhhh ", provinces, cityMap, provincesName, params);
          if (params.componentSubType == 'scatter') {
            let routeData = this.$router.resolve({
              path: "/about",
              query: {
                depotId: params.data.depotId,
                depotCode: params.data.depotCode
              }
            });
            window.open(routeData.href, "_blank");
          }
        
          this.loadCityMap(params);
        });
  
        myChart.setOption(option);
        window.addEventListener("resize", function() {
          myChart.resize();
        });
      },
  
      // 获得地图数据
      loadCityMap(params, provincesName) {
        // 分为省 \ 市  两级  需记录层级
        const that = this;
        console.log("Loading city map for:", params);
        let dataUrl;
        if (params.name in provinces) {
          dataUrl = `/map/province/${provinces[params.name]}.json`;
        } else {
          dataUrl = `/map/city/${cityMap[params.name]}.json`;
        }
        $.getJSON(dataUrl, data => {
          console.log(data, "datadatadata哈哈哈哈哈哈或或或或或或或或或");
  
          // that.mapChina = data;
          that.$echarts.registerMap(params.name, mapJsonData);
          let mapJsonData = [];
          for (var i = 0; i < data.features.length; i++) {
            // 读取地图的 name 用来组成 echart 需要的形式
            mapJsonData.push({
              name: data.features[i].properties.name,
              value: Math.floor(Math.random() * 10000),
            });
          }
  
          that.initMap(params.name, mapJsonData);
          // if (params.name in provinces) {
          this.mapStack.push({
            mapName: params.name,
            mapJson: mapJsonData, // mapJson
            pYName: provinces[params.name] || cityMap[params.name],
            data: data,
          });
         
        });
      },
  
      // 返回全国视图
      backMap() {
        let that = this;
        // this.mapStack  length是2 则返回省 如果是1 则返回全国地图
  
        console.log(this.mapStack, "mapStackmapStackmapStack");
  
        if (this.mapStack.length == 2 || this.mapStack.length == 1) {
          that.$echarts.registerMap(
            this.mapStack[0].mapName,
            this.mapStack[0].data
          );
          // 删除数组最后一个值
          this.initMap(this.mapStack[0].mapName, this.mapStack[0].mapJson);
        } else if (this.mapStack.length == 1) {
          // 返回全国地图
          // that.$echarts.registerMap("china", chinaMapData);
          // this.initMap("china", chinaMapData);
        } else if (this.mapStack.length == 0) {
          this.$message("已经回到全国地图");
          return;
        }
        this.mapStack.pop();
      },
    },
  };
  </script>
  
  <style lang="scss" scoped>
  .map-box {
    width: 100%;
    /* height: 6rem; */
    /* height: calc(94% - 1rem); */
    height: 88%;
    margin: 0px auto 0;
    overflow: hidden;
  }
  </style>
  